<template>
	<view class="content">
		<view class="yd_content">
			<view class="position">
				积分商城
			</view>
			<view class="yd_box" v-for="(item,index) in top" :key="index">
				<p>{{item.text}}</p>
				<p>{{item.num}}</p>
				<p>{{item.detail}}</p>
			</view>
		</view><!--头部内容-->
		<view class="yd_contents">
			<view class="yd_c">
				<view class="yd_box_t flex"v-for="(item,index) in tops" :key="index">
			    	<view class="yd_left">
					  {{item.text}}<span>{{item.text1}}</span>
				    </view>
				    <view class="yd_right">
					{{item.more}}&gt;
				    </view>
			    </view><!--内容顶部-->
				<view class="yd_b">
					同一商品每天仅可兑换1次，详情查看
				</view>
				<ul class="yd_list">
					<li class="flex" v-for="(item,index) in list" :key="index">
						<view class="yd_list_left">
						 <image :src="item.src" mode="" class="img"></image>
						</view>
						<view class="yd_list_right flex">
							<view class="yd_right_box1">
								<h1>{{item.text}}</h1>
								<p>{{item.text1}}</p>
								<progress percent="70" :show-info="false" stroke-width="5" activeColor="#F00"/>
								<text>{{item.num}}</text>
							</view>
							<view class="yd_right_box2">
								<p>{{item.exchange}}</p>
								<span>{{item.price}}</span>
							</view>	
						</view>
					</li>
				</ul>
			</view>		
		</view>
		<view class="yd_contents">
			<view class="yd_c">
				<view class="yd_box_t flex"v-for="(item,index) in tops" :key="index">
			    	<view class="yd_left">
					  {{item.text}}<span>{{item.text1}}</span>
				    </view>
				    <view class="yd_right">
					{{item.more}}&gt;
				    </view>
			    </view><!--内容顶部-->
				
			</view>	
			<view class="bg">
				<view class="container">
					
					<view class="frame_view">
						<view class="frame_row" style="margin-top: 48rpx;">
							<view class="frame_item" :class="'item' + color[0]">
								<image :src="award[0].img"></image>
								<text>{{ award[0].name }}</text>
							</view>
							<view class="frame_item" :class="'item' + color[1]">
								<image :src="award[1].img"></image>
								<text>{{ award[1].name }}</text>
							</view>
							<view class="frame_item" :class="'item' + color[2]">
								<image :src="award[2].img"></image>
								<text>{{ award[2].name }}</text>
							</view>
						</view>
			 
						<view class="frame_row">
							<view class="frame_item" :class="'item' + color[7]">
								<image :src="award[7].img"></image>
								<text>{{ award[7].name }}</text>
							</view>
							<!-- 抽奖 -->
							<view style="text-align: center;color: #fff;">
								<view style="font-size: 36rpx;">立即抽奖</view>
								<view style="font-size: 28rpx;">今日剩余{{free}}次</view>
							</view>
							<view class="frame_item" :class="'item' + color[3]">
								<image :src="award[3].img"></image>
								<text>{{ award[3].name }}</text>
							</view>
							
						</view>
			
			
						<view class="frame_row">
							<view class="frame_item" :class="'item' + color[6]">
								<image :src="award[6].img"></image>
								<text>{{ award[6].name }}</text>
							</view>
							<view class="frame_item" :class="'item' + color[5]">
								<image :src="award[5].img"></image>
								<text>{{ award[5].name }}</text>
							</view>
							<view class="frame_item" :class="'item' + color[4]">
			 
								<image :src="award[4].img"></image>
								<text>{{ award[4].name }}</text>
							</view>
						</view>
					</view>
					<view class="luckbtulist">
						<view class="luckone" @click="clickLuck">
							<p style="margin-top: 30upx;">免费抽奖</p>
						</view>
						<view class="luckfive" @click="clickLuckFive">
							<p style="margin-top: 30upx;">分享加一次</p>
						</view>
					</view>
					<!-- <view class="lucktips">
						<view class="lucktab">
							<view class="luckrule" @click="toggleTabs(0)" :style="styleObject">活动规则</view>
							<view class="record" @click="toggleTabs(1)" :style="styleObject1">获奖记录</view>
						</view>
						<view v-show="nowIndex==0" class="ruleinof">
							<view class="ruleconten">我是活动规则</view>
						</view>
						<view class="ruleinof" v-if="isif" v-show="nowIndex==1">
							<view style="width: 100%;height: 496rpx;  margin-top: 40rpx;overflow-y:auto;">
								<view class="recordlist">
									<view>时间:{{cjtime}}</view>
									<view>{{prize}}</view>
								</view>
							</view>
						</view>
					</view> -->
				</view>
				<!-- 弹出窗口 -->
				<view :class="{'share-box': shareState}" @click="handleHiddenShare">
					<view v-if="lucktype==0" class="nopop" :class="{'share-show': shareState}">
						<view style="margin-top: 60rpx;margin-left: 180rpx;margin-bottom: 30rpx;">
							<image src="https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_36_52_5.png" mode=""
								style="width: 124rpx;height: 144rpx;"></image>
						</view>
						<view class="poptitle">今日已经没有抽奖机会了</view>
						<view class="popbtn">确定</view>
					</view>
					<!-- 单抽 -->
					<view v-else-if="lucktype==1" class="onepop" :class="{'share-show': shareState}">
						<view class="popconten">
							<image :src="prizeimg" mode="" style="width: 190rpx;height: 190rpx;"></image>
							<view style="margin-top: 20rpx;color: #4A4A4A;font-size: 28rpx;">{{prize}}</view>
						</view>
						<view class="popbtn" style="margin-top: -90rpx;">确定</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	//计数器
	var interval = null;
	//值越大旋转时间越长  即旋转速度
	var intime = 100;
	export default{
		data(){
			return{
				//抽奖记录的显示
				isif: false,
				cjtime: "",
				// nowIndex为0的时候显示抽奖规则，nowIndex为1的时候显示抽奖记录
				nowIndex: 0,
				// 九宫格初始化的位置
				color: [0, 0, 0, 0, 0, 0, 0, 0],
				//chance中奖率   
				award: [{
						img: '/static/images/yd_06.gif',
						name: '1元优惠券',
						chance: 0,
						
					},
					{
						img: '/static/images/mine (15).gif',
						name: '1加油金',
						chance: 100,
						
					},
					{
						img: '/static/images/mine (15).gif',
						name: '1加油金',
						chance: 100,
						
					},
					{
						img: '/static/images/mine (10).gif',
						name: '谢谢惠顾',
						chance: 100,
						
					},
					{
						img: '/static/images/mine (15).gif',
						name: '1加油金',
						chance: 100,
						
					},
				{
					img: '/static/images/mine (15).gif',
					name: '50优惠券',
					chance: 100,
					
				},
					{
						img: '/static/images/mine (15).gif',
						name: '1加油金',
						chance: 100,
						
					},
					{
						img: '/static/images/mine (15).gif',
						name: '1加油金',
						chance: 100,
						
					}
				], //接收数组
				Luck: true, //防置重复点击
				lucktype: 2, //判断奖品类型
				luckPosition: 0, //停止位置
				prize: '', //奖品，
				prizeimg: '/static/images/mine (14).gif', //奖品图片
				// 弹窗按钮
				shareState: false,
				// tab切换
				styleObject: {
					'border-bottom': '3px solid #A24A1E',
				},
				styleObject1: '',
				//免费抽奖次数
				free: 2,
				// 判断类型
				payout: 0,
				top:[
					{text:'可用文字',num:'0',detail:'明细'}
				],
				tops:[
					{text:'油滴兑换',text1:'领油滴换好礼，加油更省钱',more:'更多好物'}
				],
				list:[
					{id:'1',src:'/static/images/yd_03.gif',text:'20元加油卷',text1:'满200元可用，有效期7天',num:'剩余37张',exchange:'12999油滴兑换',price:'原价:15999油滴'},
					{id:'2',src:'/static/images/yd_06.gif',text:'1元加油卷',text1:'满2元可用，有效期7天',num:'剩余2292张',exchange:'12999油滴兑换',price:'原价:15999油滴'},
					{id:'3',src:'/static/images/yd_08.gif',text:'5元加油卷',text1:'满100元可用，有效期7天',num:'剩余37张',exchange:'39999油滴兑换',price:'原价:4999油滴'},
					{id:'4',src:'/static/images/yd_10.gif',text:'10元加油卷',text1:'满200元可用，有效期7天',num:'剩余318张',exchange:'79999油滴兑换',price:'原价:15999油滴'}
				]
			}
		},
		created() {
			//获取当前时间戳
			var date = new Date().getTime();
			// 把当前的时间戳转换成yyy-MM-dd HH:mm:ss
			function timestampToTime(timestamp) {
				var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
				var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				return Y + M + D + h + m + s;
			}
			var hour = timestampToTime(date)
			console.log(hour);
			this.cjtime = hour;
		},
		methods: {
			// 记录切换nowIndex(0)的时候显示活动规则nowIndex(1)的时候显示奖品记录
			toggleTabs(index) {
				this.nowIndex = index;
				if (index == 1) {
					this.styleObject1 = {
						'border-bottom': '3px solid #A24A1E',
					}
					this.styleObject = {}
				} else {
					this.styleObject = {
						'border-bottom': '3px solid #A24A1E',
					}
					this.styleObject1 = {}
				}
			},
			// 关闭中奖弹窗
			handleHiddenShare() {
				this.shareState = false;
			},
			// 点击抽奖
			clickLuck() {
				//抽奖记录的显示
				setTimeout(() => {
					this.isif = true;
				}, 8000);
				if (this.Luck == false) { //防止过度点击
					return;
				}
				this.Luck = false;
				// }
				//判断免费次数		
				if (this.free == 0) {
					this.shareState = true
					this.lucktype = 0
					this.Luck = true;
					return;
				}
				var arr = [];
				//根据概率循环位置
				for (var i = 0; i < this.award.length; i++) {
					for (var k = 0; k < this.award[i].chance; k++) {
						arr.push(i);
					}
				}
				console.log(arr, "位置");
				//随机打乱数组
				for (let i = 0, len = arr.length; i < len; i++) {
					let index = parseInt(Math.random() * (len - 1));
					let tempValue = arr[i];
					arr[i] = arr[index];
					arr[index] = tempValue;
				}
				//从数组中随机抽取一个位置
				var a = Math.ceil(Math.random() * 10);
				if (this.free != 0) {
					this.free = this.free - 1 //抽奖次数减1
				} 
				if (this.free == 0) {
					this.payout = 1
				}
				this.luckPosition = arr[a]; //位置
				this.prize = this.award[arr[a]].name //奖品名字
				this.prizeimg = this.award[arr[a]].img //奖品图片
				// 设置this
				var e = this;
				//清空计时器
				clearInterval(interval);
				var index = 0;
				//循环设置每一项的背景图
				interval = setInterval(function() {
					var c = [0, 0, 0, 0, 0, 0, 0, 0];
					if (index > 7) {
						index = 0;
					}
					c[index] = 1;
					e.color = c;
					index++;
				}, intime);
				e.stop(e.luckPosition);
			},
		 
			// 停止
			stop(which) {
				var e = this;
				//清空计数器
				clearInterval(interval);
				//初始化当前位置
				var current = -1;
				var color = e.color;
				for (var i = 0; i < color.length; i++) {
					if (color[i] == 1) {
						current = i;
					}
				}
				//下标从1开始
				var index = current + 1;
				e.stopLuck(which, index, intime, 10);
			},
			/**
			 * which:中奖位置
			 * index:当前位置
			 * time：时间标记
			 * splittime：每次增加的时间 值越大减速越快
			 */
			stopLuck(which, index, time, splittime) {
				var e = this;
				//值越大出现中奖结果后减速时间越长
				var color = e.color;
				setTimeout(function() {
					//重置前一个位置
					var c = [0, 0, 0, 0, 0, 0, 0, 0];
					if (index > 7) {
						index = 0;
					}
					//当前位置为选中状态
					c[index] = 1;
					e.color = c;
					//如果旋转时间过短或者当前位置不等于中奖位置则递归执行
					//直到旋转至中奖位置
					if (time < 400 || index != which) {
						//越来越慢
						splittime++;
						time += splittime;
						//当前位置+1
						index++;
						e.stopLuck(which, index, time, splittime);
					} else {
						//中奖
						e.shareState = true
						e.Luck = true;
						e.lucktype = 1
						if (e.payout == 1) {
							e.limitnum = e.limitnum - 3
						}
					}
				}, time);
			},
			// 分享加一次
			clickLuckFive() {
				this.free = this.free + 1;
			}
		 
		},
		 
		
	}
</script>

<style lang="scss">
	*{margin: 0 ;padding: 0;}
	page{background-color: #eef3f4;}
	.flex{display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;}
	.img{display: block;width:150rpx;height: 80rpx;vertical-align: middle;}
	.yd_content{overflow: auto;background-image: linear-gradient(to bottom,#13a8fc,#f8fdff);position: relative;}
	.yd_box{width:20%;padding: 20rpx 10rpx;background-image: linear-gradient(to bottom,#fcbc24,#fded32);margin: 40px auto;border-radius: 40rpx;text-align: center;}
	.yd_box p{line-height: 40rpx;}
	.position{position: absolute;right:0rpx;top: 20rpx;padding: 10rpx;background-image: linear-gradient(to bottom,#fcbc24,#fded32);}
	//中间
	.yd_c{padding: 30rpx;border-radius: 20rpx;background-color: #fff;}
	.yd_left{font-weight: bold;}.yd_left span{display:inline-block;font-size: 27rpx;color: #9a9d9e;margin-left: 10rpx;margin-bottom: 10rpx;}
	.yd_b{margin: 20rpx 0;font-size: 27rpx;}
	.yd_list li {padding: 20rpx 10rpx;border: 1px solid #ffcea5;margin-bottom: 15rpx;}
	.yd_list_left{width: 21%;}
	.yd_list_right{width: 76%;}
	.yd_right_box1{width:61%}
	.yd_right_box2{width: 38%;}
	.yd_right_box2 span{display: inline-block;text-decoration: line-through;}
	.yd_right_box1 p ,.yd_right_box2 span{font-size: 22rpx;color: #9a9d9e;margin: 10rpx 0rpx;}
	.yd_right_box2 p{width: 170rpx;font-size: 20rpx;text-align: center;border-radius: 20rpx;background-color: #fed7c6;line-height: 60rpx;padding: 0 5rpx;}
	progress{width: 170rpx;display: inline-block;}
	.yd_right_box1 text{font-size: 20rpx;}
	.yd_contents{margin-bottom: 20rpx;}
	.bg {
			width: 100%;
			
			background-color: #fff;
			background-size: 100% 100%;
	
		}
	
		.container {
			overflow: hidden;
		}
	
		.limitbean {
			width: 100%;
			color: #fff;
			text-align: center;
			margin-top: 80rpx;
			font-size: 30rpx;
			margin-bottom: 24rpx;
		}
	
		.frame_view {
			width: 648rpx;
			height: 688rpx;
			margin: 0 auto;
			border-radius: 30rpx;
			background: url("https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_37_50_4.png") no-repeat;
			background-size: 100% 100%;
			// background-color: #f00;
			overflow: hidden;
		}
	
		.frame_row {
			width: 520rpx;
			height: 168rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin-left: 64rpx;
			margin-bottom: 20rpx;
	
		}
	
		.frame_item {
			width: 168rpx;
			height: 168rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap;
			font-size: 20px;
			/* box-sizing:border-box; */
			background: #FFFFFF;
			/* 	border-radius: 17px; */
			/* 	box-shadow: 0px 6px 0px 0px rgba(236,231,228,1); */
			background: url("https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_41_5_0.png") no-repeat;
			background-size: 100% 100%;
	
	
		}
	
		.frame_item image {
			width: 80rpx;
			height: 80rpx;
			display: block;
	
		}
	
		.frame_item text {
			font-size: 26rpx;
			display: block;
			width: 100%;
			text-align: center;
			color: #818181;
			margin-top: -40rpx;
		}
	
		.item1 {
			background: url("https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_42_16_6.png") no-repeat;
			background-size: 100% 100%;
			// box-shadow: 0px 10px 20px 0px rgba(170,56,0,1), 0px 0px 20px 0px rgba(196,58,215,1), 0px 4px 0px 0px rgba(255,255,255,0.29);
	
		}
	.luckbtulist {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
	}
	 
	.luckone {
		width: 310upx;
		height: 100upx;
		background: linear-gradient(360deg, #E4392C 0%, #F6A261 100%);
		box-shadow: 0px 10px 20px 0px rgba(153, 0, 0, 0.81), 0px 5px 0px 0px rgba(195, 48, 7, 1), 0px 4px 0px 0px rgba(255, 255, 255, 0.23);
		border-radius: 50upx;
		margin-right: 28rpx;
		text-align: center;
	}
	 
	.luckfive {
		width: 310upx;
		height: 100upx;
		background: linear-gradient(180deg, #FFC3AC 0%, #D43EDC 100%);
		box-shadow: 0px 10px 20px 0px rgba(170, 56, 0, 1), 0px 5px 0px 0px rgba(196, 58, 215, 1), 0px 4px 0px 0px rgba(255, 255, 255, 0.29);
		border-radius: 50px;
		text-align: center;
	}
	 
	.lucktips {
		width: 686rpx;
		height: 800rpx;
		background: #0d62ad;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: 70rpx;
	}
	 .lucktab {
	 	width: 580rpx;
	 	height: 104rpx;
	 	border-bottom: 1rpx solid #e3672a;
	 	margin: 0 auto;
	 	display: flex;
	 	align-items: center;
	 	justify-content: space-around;
	 	font-size: 28rpx;
	 	color: #e3672a;
	 	font-weight: 600;
	 }
	  
	 .lucktab view {
	 	height: 100%;
	 	line-height: 104rpx;
	 }
	  
	 .action {
	  
	 	border-bottom: 3px solid #e3672a;
	  
	 }
	  
	 .ruleinof {
	 	width: 584rpx;
	 	height: 496rpx;
	 	margin: 0 auto;
	 	font-size: 28rpx;
	 	font-family: PingFangSC-Regular, PingFang SC;
	 	font-weight: 400;
	 	color: #D97645;
	  
	 }
	  
	 .ruleinof .ruleconten {
	 	margin-top: 40rpx;
	 	line-height: 40rpx;
	 }
	  
	 .recordlist {
	 	display: flex;
	 	align-items: center;
	 	justify-content: space-between;
	 	margin-bottom: 20rpx;
	 }
	  
	  
	 
	 .share-box {
	 	width: 100%;
	 	height: 100%;
	 	position: fixed;
	 	top: 0rpx;
	 	left: 0rpx;
	 	bottom: 0rpx;
	 	right: 0rpx;
	 	background-color: rgba(0, 0, 0, 0.4);
	 	transition: .3s;
	 	z-index: 999;
	 }
	  
	 .nopop {
	 	display: none;
	 	width: 470rpx;
	 	height: 455rpx;
	 	background: #FFFFFF;
	 	border-radius: 30px;
	 	position: absolute;
	 	left: 50%;
	 	top: 50%;
	 	margin-top: -228rpx;
	 	/* 高度的一半 */
	 	margin-left: -235rpx;
	 	/* 宽度的一半 */
	 }
	  
	 .share-show {
	 	display: block !important;
	 }
	  
	 .poptitle {
	 	font-size: 28rpx;
	 	font-family: PingFangSC-Regular, PingFang SC;
	 	font-weight: 400;
	 	color: #4A4A4A;
	 	text-align: center;
	  
	 }
	  
	 .popbtn {
	 	width: 310upx;
	 	height: 100upx;
	 	background: linear-gradient(360deg, #E4392C 0%, #F6A261 100%);
	 	box-shadow: 0px 10px 10px 0px rgba(153, 0, 0, 0.81), 0px 5px 0px 0px rgba(195, 48, 7, 1), 0px 4px 0px 0px rgba(255, 255, 255, 0.23);
	 	border-radius: 50upx;
	 	margin-right: 28rpx;
	 	text-align: center;
	 	line-height: 100upx;
	 	font-size: 32upx;
	 	color: #fff;
	 	margin: 0 auto;
	 	margin-top: 36upx;
	 }
	  
	 .onepop {
	 	display: none;
	 	width: 696rpx;
	 	height: 872rpx;
	 	background: url("https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_41_31_5.png") no-repeat;
	 	background-size: 100% 100%;
	 	position: absolute;
	 	left: 50%;
	 	top: 50%;
	 	margin-top: -438rpx;
	 	/* 高度的一半 */
	 	margin-left: -350rpx;
	 	/* 宽度的一半 */
	 	overflow: hidden;
	 }
	  
	 .popconten {
	 	width: 470rpx;
	 	height: 472rpx;
	 	background: url("https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_39_28_5.png") no-repeat;
	 	background-size: 100% 100%;
	 	margin: 0 auto;
	 	margin-top: 340rpx;
	 	display: flex;
	 	flex-direction: column;
	 	align-items: center;
	 	justify-content: center;
	  
	 }
	  
	 .popcontenlist {
	 	width: 470rpx;
	 	height: 300rpx;
	 	margin: 0 auto;
	 	margin-top: 370rpx;
	 	display: flex;
	 	align-items: center;
	 	flex-wrap: wrap;
	  
	 }
	  
	 .poplucklist {
	 	width: 88rpx;
	 	height: 180rpx;
	 	margin-left: 56rpx;
	 }
</style>